<template>
	<div style="height: 100%;" class="bgd_log">
		<div class="container" style="position: absolute;top: 160px;right: 120px;">
			<div class="header">
				<div class="left f_gray h_lf">
					还没帐号？
				</div>
				<router-link to="/register">
					<div class="left f_red">
						<a href="javascript:;">立即注册 &gt;</a>
					</div>
				</router-link>
			</div>
			<div class="logo_log">
				<img src="../static/images/logo.png" style="" />
			</div>
			<div>
				<div class="f_red f_weight txt_center">
					用户登录
				</div>
				<div class="b_row">
					<span>
                    <img src="../static/images/user_icon.png" />
                </span>
					<input v-model="phone" type="text" placeholder="已验证手机/用户名" style="line-height: 1em;">
				</div>
				<div class="b_row">
					<span>
                    <img src="../static/images/pwd_icon.png" />
                </span>
					<input v-model="password" type="text" placeholder="密码" style="line-height: 1em;">
				</div>
				<div class="b_row f_size13" style="border: 0;">
					<input v-bind:checked="rememberAccount" @click="rememberAccount=!rememberAccount" type="checkbox">
					<label>记住密码</label>
					<router-link to="forget">
						<span class="right">忘记密码？</span>
					</router-link>
				</div>
				<div class="b_row txt_center" style="border: 0;">
					<button style="background: #742c1d;" @click="loginClick">立即登陆</button>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	export default {
		created() {
			var self = this
			self.phone = self.getCookie('phone')
			self.password = self.getCookie('password')
			console.log('self.phone', self.phone)
		},
		data() {
			return {
				phone: '',
				password: '',
				rememberAccount: false
			}
		},
		methods: {
			loginClick: function() {
				var self = this
				console.log('self.rememberAccount', self.rememberAccount)
				self.$api.post('/front/base/login', {
					phone: this.phone,
					password: this.password
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: "登录成功！"
						})
						if(self.rememberAccount === true) {
							self.setCookie('phone', self.phone, 1)
							self.setCookie('password', self.password, 1)
						} else {
							self.clearCookie('phone')
							self.clearCookie('password')
						}
					} else {
						self.$message(r.error);
						return false
					}

					self.$router.push('/')

				})
			},
			//设置cookie
			setCookie: function(cname, cvalue, exdays) {
				var d = new Date();
				d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
				var expires = "expires=" + d.toUTCString();
				console.info(cname + "=" + cvalue + "; " + expires);
				document.cookie = cname + "=" + cvalue + "; " + expires;
				console.info(document.cookie);
			},
			//获取cookie
			getCookie: function(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i];
					while(c.charAt(0) == ' ') c = c.substring(1);
					if(c.indexOf(name) != -1) return c.substring(name.length, c.length);
				}
				return "";
			},
			//清除cookie
			clearCookie: function(username) {
				this.setCookie(username, "", -1);

			},
			checkCookie: function() {
				var user = this.getCookie("username");
				if(user != "") {
					alert("Welcome again " + user);
				} else {
					user = prompt("Please enter your name:", "");
					if(user != "" && user != null) {
						this.setCookie("username", user, 365);
					}
				}
			}
		}
	}
</script>